<template>
  <el-aside>
    <el-aside>
      <el-menu
          router
          unique-opened
          :default-active="activePath"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse-transition="true"
          @select="getpath">
        <el-menu-item index="/">
          <i class="el-icon-setting"></i>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu v-for="item in munu" :index="item.web_id + ''" :key="item.web_id">
          <template #title>
            <i :class="item.web_icon"></i>
            <span>{{ item.web_content }}</span>
          </template>
          <el-menu-item :index="ite.web_path" v-for="ite in item.children" :key="ite.web_id">{{ ite.web_content }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
  </el-aside>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {ElMessage} from 'element-plus'
import axios from "@/utils/axios";
import Router from '@/router'

export default {
  name: 'Order',
  setup() {
    const state = reactive({
      activePath: window.localStorage.getItem('web_path') ?? "/",
      munu: []
    })
    onMounted(() => {
      getroute()
      setpath()
    })
    const getroute = async () => {
      if (window.localStorage.getItem('web_router') === null) {
        const {data: res} = await axios.get("/route")
        if (res.code !== 1000) return ElMessage.error(res.msg)
        window.localStorage.setItem('web_router', JSON.stringify(res.data))
        state.munu = res.data
      } else {
        state.munu = JSON.parse(window.localStorage.getItem('web_router'))
      }
      state.munu.forEach((item) => {
        item.children.length > 0 && item.children.forEach((v) => {
          Router.addRoute("Home", {
            path: v.web_path,
            name: v.web_content,
            component: () => import(`@/${v.web_to}`)
          })
        })

      })
      console.log(Router.options.routes)
    }
    const getpath = (data) => {
      console.log(data)
      state.activePath = data
      window.localStorage.setItem('web_path', data)
    }
    const setpath = () => {
      Router.push(state.activePath)
    }

    return {
      ...toRefs(state),
      getroute,
      getpath,
      setpath
    }
  }
}

</script>

<style lang="less" scoped>
.el-menu {
  border-right: 0;
}
</style>
